/**
 * Plugin select_box
 * Description: Thay thế listbox chuẩn html thành dạng css
 *
 * ** Lưu ý: Gọi .select_box(html) để thay đổi html của select tag
 */
(function ($) {
    "use strict";
    var key = "select-box";

    var SelectBox = function (element) {
        var self = this;
        this.$select = $(element);

        this.$display_text = $('<span class="value"></span>');
        this.$display_box = $('<div class="display"></div>');
        this.$ul = $('<ul></ul>');

        $('<div class="select-box"></div>').append(
            this.$display_box.append(
                this.$display_text,
                $('<span class="image">&#9660;</span>')
            ),
            this.$ul
        ).insertAfter(this.$select);

        /**
         * Số phần tử con của UL
         * @type {number}
         */
        this.counter = 0;

        this.$select.hide();
        this.$ul.hide();

        this.$display_box.click (function () {
            if (self.$ul.css('display') === 'none' && self.counter > 0) {
                self.$ul.slideDown(1000, 'easeOutElastic');
            } else if (self.$ul.css('display') === 'block') {
                self.$ul.fadeOut(500, 'easeOutBack');
            }
        });

        // Thiết lập sự kiện click trên mỗi item để đóng dropdown
        self.$ul.on('click', 'li', function () {
            var $li = $(this),
                value = $li.data('value');

            self.$ul.fadeOut(500, 'easeOutBack');
            self.set_value(value);

        });


        $("label[for=" + this.$select.attr("id") + "]").click(function () {
            self.$display_box.click();
        });

        // Update element from SELECT tag
        this.update();
    };


    SelectBox.prototype.set_value = function (value) {
        var self = this;
        var op = $("option[value=" + value + "]", self.$select);
        if (op.length > 0) {
            $("option", self.$select).removeAttr("selected");
            op.attr("selected", true);
            self.$display_text.text(op.text());
            // Gọi sự kiện change trên select
            self.$select.change();
        }
    };


    /**
     * Cập nhật dữ liệu từ select (this.$select>option) sang ul hiển thị
     */
    SelectBox.prototype.update = function () {
        var html = "",
            self = this;

        this.counter = $("option", this.$select).each(function () {
            var option = $(this);
            html += '<li data-value="' + option.attr("value") + '">' +
                option.text() + "</li>";
        }).length;

        this.$ul.html(html);

        // Đặt giá trị sang
        var sel_op = $("option[selected]", this.$select);
        if (sel_op.length === 0 ){
            sel_op = $("option:first", this.$select);
        }

        this.set_value(sel_op.attr("value"));
    };


    SelectBox.prototype.update_select_html = function (html) {
        this.$select.html(html);
        this.update();
    };


    /**
     * Plugin select_box
     * @return {*}
     */
    $.fn.select_box = function () {
        return this.each(function () {
            if (!$(this).data(key)) {
                $(this).data(key, (new SelectBox(this)));
            }
        });
    };

    $.fn.update_select_html = function (html) {
        return this.each(function () {
            $(this).data(key).update_select_html(html);
        });
    };

    $.fn.set_value = function (value) {
        return this.each (function () {
            $(this).data(key).set_value(value);
        });
    };

    // Init all element .select-box
    $(function () {
        $('select.select-box').select_box();
    });
}(window.jQuery));